<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AOLISHA个人站</title>
<link  href="css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="css/main.css" rel="stylesheet" type="text/css">

<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/kxbdSuperMarquee.js"></script>
<script type="text/javascript" src="js/jquery.fancybox.js"></script>
<script type="text/javascript">
    $(document).ready(function(e) {
        //点击导航滚动
        $('#home').click(function(){
            $('nav li a').removeClass();
            $(this).addClass('active');
            $('body,html').animate({scrollTop:$(window).height()*0},500);
        })
        $('#content').click(function(){
            $('body,html').animate({scrollTop:$(window).height()*1},500);
            $('nav li a').removeClass();
            $(this).addClass('active');
        })
        $('#other').click(function(){
            $('body,html').animate({scrollTop:$(window).height()*2},500);
            $('nav li a').removeClass();
            $(this).addClass('active');
        })
        $('#me').click(function(){
            $('body,html').animate({scrollTop:$(window).height()*3},500);
            $('nav li a').removeClass();
            $(this).addClass('active');
        })

        //点击播放
        var oMusic =document.getElementById('music');

        $('#box').click(function(){ //点击事件

            if($('#box>li').hasClass('play')){ //判断是否有类paly
//                    console.log("点击了事件");
                $('.play').removeClass();	//移除
                oMusic.pause();
            }else{
//                    console.log("关闭");
                console;
                $('#box>li').addClass('play'); //添加
                oMusic.play();
            }
        })
        //图片滚动
        $('#roll').kxbdSuperMarquee({
            distance:670,
            direction: 'left',
            time:1,
            navId:'#subnav',
            btnGo:{left:'#goL',right:'#goR'}
        });

    });

</script
</head>
<body>
<video id="bgvideo" preload="auto" autoplay="autoplay" loop="loop">
    <source src="sources/tlo.mp4" type="video/mp4">
</video>
<nav>
    <ul>
        <li><a href="#" class="active" id="home">HOME</a></li>
        <li><a href="#" id="content">CONTENT</a></li>
        <li><a href="#" id="other">OTHER</a></li>
        <li><a href="#" id="me">ME</a></li>
    </ul>
</nav>
<!--第一屏-->
<section id="one"></section>
<!--第二屏-->
<section id="two"></section>

<!--第三屏-->
<section id="three">
    <div class="three_left">我是文字</div>
    <div class="three_right">
        <div id="roll">
            <ul>
                <li><img src="images/1.jpg"></li>
                <li><img src="images/2.jpg"></li>
                <li><img src="images/3.jpg"></li>
                <li><img src="images/4.jpg"></li>
                <li><img src="images/5.jpg"></li>
                <li><img src="images/6.jpg"></li>
                <li><img src="images/7.jpg"></li>
            </ul>
        </div>

        <div id="goL"></div>
        <div id="goR"></div>
    </div>
</section>
<!--第四屏-->
<section id="five"></section>
<!--底部音乐部分-->
<footer>
    <ul id="box">
        <li class="play"></li>
        <li class="play"></li>
        <li class="play"></li>
        <li class="play"></li>
        <li class="play"></li>
        <li class="play"></li>
        <li class="play"></li>
        <li class="play"></li>
    </ul>
    <audio src="sources/Down.mp3" id="music" autoplay></audio>
</footer>

</body>
</html>